.spinner
  $transparent: rgba(0, 0, 0, 0)
  $color: black
  cursor: wait
  background-color: $transparent
  opacity: .8
  border-radius: 100px
  margin: 5% auto
  +animation(loading .5s infinite linear)

  border: 5px solid $color
  border-top: 5px solid $transparent
  border-left: 5px solid $transparent
  width: 30px
  height: 30px

  &.medium
    border-width: 10px solid $color
    border-top: 10px solid $transparent
    border-left: 10px solid $transparent
    width: 50px
    height: 50px

  &.large
    border: 20px solid $color
    border-top: 20px solid $transparent
    border-left: 20px solid $transparent
    width: 100px
    height: 100px

+keyframes(loading)
  0%
    +transform(rotate(0deg))
  100%
    +transform(rotate(360deg))
